<div class="leftmenu-wrapper z-50">
  <%= link_to root_path, class: "flex h-16 items-center justify-center" do %>
    <img src="/images/logo-compact.webp" class="w-[40px] h-[40px] lg:hidden" />
    <img src="/images/logo-full.webp" class="h-[40px] hidden lg:block" />
    <span class="sr-only"><%= Rails.configuration.application_name %></span>
  <% end %>

  <% if current_account.stack_manager.present? %>
    <div class="flex items-center justify-center">
      <%= render "devise/sessions/portainer_badge",
                 stack_manager: current_account.stack_manager,
                 verification_method: "authentication",
                 logout_on_unauthorized: true %>
    </div>
  <% end %>
  <div class="flex items-center justify-center">
    <details class="mx-auto dropdown">
      <summary class="btn m-1"><%= current_account.name %> <iconify-icon icon="lucide:chevron-down"></iconify-icon></summary>
      <ul class="menu dropdown-content w-64 z-50 rounded-box bg-base-300 p-2 shadow">
        <!-- Current Account Section -->
        <li class="menu-title text-xs opacity-60 px-4 py-2">CURRENT ORGANIZATION</li>
        <li>
          <div class="flex items-center gap-3 px-4 py-3 cursor-default hover:bg-base-200">
            <div class="flex-1 min-w-0">
              <div class="flex items-center gap-2">
                <span class="font-semibold truncate"><%= current_account.name %></span>
              </div>
            </div>
          </div>
        </li>

        <!-- Other Accounts Section -->
        <% other_accounts = current_user.accounts.where.not(id: current_account.id).order(created_at: :desc) %>
        <% if other_accounts.any? %>
          <li class="menu-title text-xs opacity-60 px-4 py-2 mt-2">OTHER ORGANIZATIONS</li>
          <% other_accounts.each do |account| %>
            <li>
              <%= link_to switch_account_path(account), class: "flex items-center gap-3 px-4 py-3" do %>
                <div class="flex-1 min-w-0">
                  <div class="font-semibold truncate"><%= account.name %></div>
                </div>
              <% end %>
            </li>
          <% end %>
        <% end %>

        <hr class="my-2 border-base-content/15" />
        <li>
          <button class="btn btn-ghost btn-sm justify-start" onclick="click_outside_modal_2.showModal()">
            <iconify-icon icon="lucide:plus" height="16"></iconify-icon>
            <span>New organization</span>
          </button>
        </li>
      </ul>
    </details>
  </div>

  <div data-simplebar="init" class="h-[calc(100vh-128px)] lg:h-[calc(100vh-294px)] simplebar-scrollable-y">
    <div class="simplebar-wrapper">
      <div class="simplebar-mask">
        <div class="simplebar-offset">
          <div class="simplebar-content-wrapper">
            <div class="simplebar-content">
              <div class="menu mb-6">
                <li class="mb-0.5">
                  <details <%= 'open' if in_namespace?('projects') %>>
                    <summary>
                      <%= link_to projects_path do %>
                        <div class="flex items-center gap-2">
                          <iconify-icon icon="lucide:sparkles" height="18"></iconify-icon>
                          Projects
                        </div>
                      <% end %>
                    </summary>
                    <ul>
                      <% current_account.projects.order(created_at: :desc).each do |project| %>
                        <li>
                          <%= link_to root_projects_path(project), class: "hover:bg-base-content/15 #{'active' if request.path.start_with?(project_path(project))}" do %>
                            <div class="flex items-center gap-2">
                              <%= project.name %>
                            </div>
                          <% end %>
                        </li>
                      <% end %>
                      <li>
                        <%= link_to new_project_path, class: "hover:bg-base-content/15 #{'active' if current_page?(new_project_path)}" do %>
                          <div class="flex items-center gap-2">
                            <iconify-icon icon="lucide:plus" height="18"></iconify-icon>
                            New Project
                          </div>
                        <% end %>
                      </li>
                    </ul>
                  </details>
                </li>
                <li class="mb-0.5">
                  <details <%= 'open' if in_namespace?('clusters') %>>
                    <summary>
                      <%= link_to clusters_path do %>
                        <div class="flex items-center gap-2">
                          <iconify-icon icon="lucide:boxes" height="18"></iconify-icon>
                          Clusters
                        </div>
                      <% end %>
                    </summary>
                    <ul>
                      <% current_account.clusters.order(created_at: :desc).each do |cluster| %>
                        <li>
                          <%= link_to cluster_path(cluster), class: "hover:bg-base-content/15 #{'active' if request.path.start_with?(cluster_path(cluster))}" do %>
                            <div class="flex items-center gap-2">
                              <%= cluster.name %>
                            </div>
                          <% end %>
                        </li>
                      <% end %>
                      <li>
                        <%= link_to new_cluster_path, class: "hover:bg-base-content/15 #{'active' if current_page?(new_cluster_path)}" do %>
                          <div class="flex items-center gap-2">
                            <iconify-icon icon="lucide:plus" height="18"></iconify-icon>
                            New Cluster
                          </div>
                        <% end %>
                      </li>
                    </ul>
                  </details>
                </li>
                <li class="mb-0.5">
                  <details <%= 'open' if in_namespace?('add_ons') %>>
                    <summary>
                      <%= link_to add_ons_path do %>
                        <div class="flex items-center gap-2">
                          <iconify-icon icon="lucide:package" height="18"></iconify-icon>
                          Add Ons
                        </div>
                      <% end %>
                    </summary>
                    <ul>
                      <% current_account.add_ons.order(created_at: :desc).each do |add_on| %>
                        <li>
                          <%= link_to add_on_path(add_on), class: "hover:bg-base-content/15 #{'active' if request.path.start_with?(add_on_path(add_on))}" do %>
                            <div class="flex items-center gap-2">
                              <%= add_on.name %>
                            </div>
                          <% end %>
                        </li>
                      <% end %>
                      <li>
                        <%= link_to new_add_on_path, class: "hover:bg-base-content/15 #{'active' if current_page?(new_add_on_path)}" do %>
                          <div class="flex items-center gap-2">
                            <iconify-icon icon="lucide:plus" height="18"></iconify-icon>
                            New Add On
                          </div>
                        <% end %>
                      </li>
                    </ul>
                  </details>
                </li>

              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="mx-4 hidden rounded bg-base-200 px-3 py-4 lg:block">
    <p class="text-center text-base font-medium">Need Help?</p>
    <p class="mt-3 text-center text-sm">Join our Discord server!</p>
    <div class="mt-3 text-center">
      <%= link_to "https://discord.gg/68YthskqEz", class: "btn btn-primary btn-sm" do %>
        Join Discord <iconify-icon icon="ic:baseline-discord" height="16"></iconify-icon>
      <% end %>
    </div>
  </div>
</div>
<!-- Start: Click Outside Modal -->
<dialog aria-label="Modal" class="modal" id="click_outside_modal_2">
  <div class="modal-box">
    <form method="dialog">
      <button aria-label="Close modal" class="btn btn-circle btn-ghost btn-sm absolute right-2 top-2">
        <iconify-icon icon="lucide:x" height="16"></iconify-icon>
      </button>
    </form>
    <div class="mb-4 w-full text-xl font-bold">New Account</div>
    <div>
      <%= form_with(model: Account.new, url: accounts_path) do |form| %>
        <div class="form-control mt-1 w-full">
          <label class="label">
            <span class="label-text">Account Name</span>
          </label>
          <%= form.text_field :name, class: "input input-bordered w-full focus:outline-offset-0" %>
        </div>
        <div class="form-footer">
          <%= form.button "Submit", class: "btn btn-primary" %>
        </div>
      <% end %>
    </div>
  </div>
  <form method="dialog" class="modal-backdrop">
    <button>close</button>
  </form>
</dialog>
<!-- End: Click Outside Modal -->
